<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <div th:replace="include/bootstrap :: bootstrap"></div>
    <style>
        .password-container {
            max-width: 600px;
            margin: 50px auto;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            background-color: #fff;
        }
        .password-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        .password-header h3 {
            color: #337ab7;
            font-weight: bold;
        }
        .form-group {
            margin-bottom: 25px;
        }
        .btn-container {
            text-align: center;
            margin-top: 30px;
        }
        .btn-submit {
            min-width: 120px;
        }
        .helper-text {
            display: block;
            margin-top: 5px;
            font-size: 12px;
            color: #777;
        }
        .error-message {
            color: #d9534f;
            display: none;
        }
        body {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
<div th:replace="include/bootstrap :: StudentNav"></div>

<div class="container">
    <div class="password-container">
        <div class="password-header">
            <h3><i class="glyphicon glyphicon-lock"></i> 修改密码</h3>
            <p class="text-muted">请输入您的旧密码和新密码</p>
        </div>
        
        <form id="passwordForm" th:action="@{/xiugai}" method="post">
            <input type="hidden" name="userid" th:value="${session.lis.getUserid()}">
            <input type="hidden" id="ps" th:value="${session.lis.getUserpwd()}">
            
            <div class="form-group">
                <label for="pass">原密码：</label>
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input type="password" name="pass" id="pass" class="form-control" placeholder="请输入原密码"/>
                </div>
                <span id="old-password-error" class="error-message"></span>
            </div>
            
            <div class="form-group">
                <label for="password">新密码：</label>
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input type="password" name="userpwd" id="password" class="form-control" placeholder="请输入新密码"/>
                </div>
                <span id="new-password-error" class="error-message"></span>
                <span class="helper-text">密码长度至少为6位，建议包含字母和数字</span>
            </div>
            
            <div class="form-group">
                <label for="password2">确认密码：</label>
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input type="password" name="password2" id="password2" class="form-control" placeholder="请再次输入新密码"/>
                </div>
                <span id="confirm-password-error" class="error-message"></span>
            </div>
            
            <div class="btn-container">
                <a th:href="@{/StuMan}" class="btn btn-default">返回</a>
                <button type="submit" class="btn btn-primary btn-submit">确认修改</button>
            </div>
        </form>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#passwordForm").submit(function(event){
            var old = document.getElementById("ps").value;
            var pass = document.getElementById("pass").value;
            var password = document.getElementById("password").value;
            var password2 = document.getElementById("password2").value;
            
            // 重置错误消息
            $("#old-password-error").hide().text("");
            $("#new-password-error").hide().text("");
            $("#confirm-password-error").hide().text("");
            
            var isValid = true;
            
            // 检查原密码
            if(pass == "") {
                $("#old-password-error").text("请输入原密码").show();
                isValid = false;
            } else if(old != pass) {
                $("#old-password-error").text("原密码不正确").show();
                isValid = false;
            }
            
            // 检查新密码
            if(password == "") {
                $("#new-password-error").text("请输入新密码").show();
                isValid = false;
            } else if(password.length < 6) {
                $("#new-password-error").text("新密码长度至少为6位").show();
                isValid = false;
            }
            
            // 确认密码
            if(password2 == "") {
                $("#confirm-password-error").text("请再次输入新密码").show();
                isValid = false;
            } else if(password2 != password) {
                $("#confirm-password-error").text("两次输入的密码不一致").show();
                isValid = false;
            }
            
            if(!isValid) {
                event.preventDefault();
            } else if(!confirm("确定要修改密码吗？修改后将需要重新登录")) {
                event.preventDefault();
            }
        });
    });
</script>

</body>
</html> 